<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta
            name="keywords"
            content="哔哩哔哩, 哔哩哔哩漫画, bilibili 漫画官方网站, 漫画,动画, 原创, 正版, 海贼王, 五等分的新娘, 约定的梦幻岛, 辉夜大小姐想让我告白 ~天才们的恋爱头脑战~, 关于我转生变成史莱姆这档事, 我的英雄学园, 修真聊天群, 乔乔的奇妙冒险, 斗罗大陆, 一拳超人, 灵能百分百, 铳梦"
        />
        <meta
            name="description"
            content="哔哩哔哩正版漫画阅读平台, 海量官方漫画连载在线观看, 二次元动漫迷的追漫神器, 热门漫画: 海贼王, 五等分的新娘, 约定的梦幻岛, 辉夜大小姐想让我告白 ~天才们的恋爱头脑战~, 关于我转生变成史莱姆这档事, 我的英雄学园, 修真聊天群, 乔乔的奇妙冒险, 斗罗大陆, 我家大师兄脑子有坑, 一拳超人, 灵能百分百, 铳梦等"
        />
        <link rel="icon" href="./favicon.ico" />
        <title>哔哩哔哩漫画 - bilibili 正版漫画平台</title>
        <link rel="stylesheet" href="./css/bass.css" />
        <link rel="stylesheet" href="./swiper/sw-min.css" />
        <link rel="stylesheet" href="./swiper/sw-user.css" />
        <link rel="stylesheet" href="./css/index.css" />
    </head>
    <body>
        <!-- 头部区域 -->
        <div class="box">
            <div class="box-nav w">
                <!-- logo -->
                <h1 class="box-logo">
                    <a href="javascript:;">
                        <img src="./images/logo.png" alt="" />
                        <span>哔哩哔哩慢慢画</span>
                    </a>
                </h1>
                <!-- 导航分类 -->
                <div class="box-fenlei">
                    <div class="fenlei-items">
                        <div class="fenlei-items">
                            <a href="javascript:;" id="bilibili">
                                <img src="./images/nav-top-icon.png" alt="" />
                                <span>主站</span>
                            </a>
                            <a href="javascript:;" class="nav-items active">
                                <span>首页</span>
                            </a>
                            <a href="javascript:;" class="nav-items">
                                <span>分类</span>
                            </a>
                            <a href="javascript:;" class="nav-items">
                                <span>更新</span>
                            </a>
                        </div>
                        <div class="fenlei-item2">
                            <a href="javascript:;" class="nav-items">
                                <span>冒险</span>
                            </a>
                            <a href="javascript:;" class="nav-items">
                                <span>热血</span>
                            </a>
                            <a href="javascript:;" class="nav-items">
                                <span>搞笑</span>
                            </a>
                            <a href="javascript:;" class="nav-items">
                                <span>恋爱</span>
                            </a>
                            <a href="javascript:;" class="nav-items">
                                <span>少女</span>
                            </a>
                            <a href="javascript:;" class="nav-items">
                                <span>分类</span>
                            </a>
                            <a href="javascript:;" class="nav-items">
                                <span>|</span>
                            </a>
                            <a href="javascript:;" class="nav-items">
                                <span>更新</span>
                            </a>
                        </div>
                    </div>
                </div>
                <!-- 搜索、下载、login 区域 -->
                <div class="right">
                    <!-- 搜索区域 -->
                    <div class="box-serach">
                        <input type="text" />
                        <span></span>
                    </div>
                    <!-- 下载 -->
                    <div class="download-app">
                        <a href="javascript:;">
                            <span>下载APP</span>
                            <div class="toptip"></div>
                            <div class="erweima">
                                <div class="top"></div>
                                <div class="center"></div>
                                <div class="bottom-first">
                                    <i class="icon"></i>
                                    <span>下载APP</span>
                                </div>
                                <div class="bottom-last">
                                    <span class="one">免费解锁</span>
                                    <span>更多章节</span>
                                </div>
                            </div>
                        </a>
                    </div>
                    <!-- login区域 -->
                    <div class="box-login">
                        <a href="javascript:;" class="t1">登录</a>
                        <span>|</span>
                        <a href="javascript:;" class="t2">注册</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- banner 轮播图 -->
        <div class="banner">
            <!-- 轮播图 -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="javascript:;">
                            <img src="./images/banner-img1.jpg" alt="" />
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="javascript:;">
                            <img src="./images/banner-img2.jpg" alt="" />
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="javascript:;">
                            <img src="./images/banner-img3.jpg" alt="" />
                        </a>
                    </div>
                </div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="banner-nav">
                <ul class="container">
                    <li><a href="javascript:;">热血</a></li>
                    <li><a href="javascript:;">古风</a></li>
                    <li><a href="javascript:;">玄幻</a></li>
                    <li><a href="javascript:;">奇幻</a></li>
                    <li><a href="javascript:;">悬疑</a></li>
                    <li><a href="javascript:;">都市</a></li>
                    <li><a href="javascript:;">历史</a></li>
                    <li><a href="javascript:;">武侠仙侠</a></li>
                    <li><a href="javascript:;">游戏竞技</a></li>
                    <li><a href="javascript:;">架空</a></li>
                    <li><a href="javascript:;">青春</a></li>
                    <li><a href="javascript:;">西幻</a></li>
                    <li><a href="javascript:;">现代</a></li>
                    <li><a href="javascript:;">全部 ></a></li>
                </ul>
            </div>
        </div>

        <!-- 为你推荐 -->
        <div class="dt tuijian w">
            <!-- title -->
            <div class="tj-title">
                <h2>为你推荐</h2>
                <div class="change">
                    <div class="change-icon"></div>
                    <div class="change-text">换一批</div>
                </div>
            </div>
            <div class="tj-list">
                <div class="tj-items">
                    <a href="javascript:;">
                        <div class="tj-item">
                            <div class="item-img"></div>
                            <p>我独自盗墓</p>
                            <span>都市</span>
                        </div>
                    </a>
                </div>
                <div class="tj-items">
                    <a href="javascript:;">
                        <div class="tj-item">
                            <div class="item-img"></div>
                            <p>我独自盗墓</p>
                            <span>都市</span>
                        </div>
                    </a>
                </div>
                <div class="tj-items">
                    <a href="javascript:;">
                        <div class="tj-item">
                            <div class="item-img"></div>
                            <p>我独自盗墓</p>
                            <span>都市</span>
                        </div>
                    </a>
                </div>
                <div class="tj-items">
                    <a href="javascript:;">
                        <div class="tj-item">
                            <div class="item-img"></div>
                            <p>我独自盗墓</p>
                            <span>都市</span>
                        </div>
                    </a>
                </div>
                <div class="tj-items">
                    <a href="javascript:;">
                        <div class="tj-item">
                            <div class="item-img"></div>
                            <p>我独自盗墓</p>
                            <span>都市</span>
                        </div>
                    </a>
                </div>
                <div class="tj-items">
                    <a href="javascript:;">
                        <div class="tj-item">
                            <div class="item-img"></div>
                            <p>我独自盗墓</p>
                            <span>都市</span>
                        </div>
                    </a>
                </div>
            </div>
            <div class="tj-list">
                <div class="tj-items">
                    <a href="javascript:;">
                        <div class="tj-item">
                            <div class="item-img2"></div>
                            <p>修罗武神</p>
                            <span>玄幻</span>
                        </div>
                    </a>
                </div>
                <div class="tj-items">
                    <a href="javascript:;">
                        <div class="tj-item">
                            <div class="item-img2"></div>
                            <p>修罗武神</p>
                            <span>玄幻</span>
                        </div>
                    </a>
                </div>
                <div class="tj-items">
                    <a href="javascript:;">
                        <div class="tj-item">
                            <div class="item-img2"></div>
                            <p>修罗武神</p>
                            <span>玄幻</span>
                        </div>
                    </a>
                </div>
                <div class="tj-items">
                    <a href="javascript:;">
                        <div class="tj-item">
                            <div class="item-img2"></div>
                            <p>修罗武神</p>
                            <span>玄幻</span>
                        </div>
                    </a>
                </div>
                <div class="tj-items">
                    <a href="javascript:;">
                        <div class="tj-item">
                            <div class="item-img2"></div>
                            <p>修罗武神</p>
                            <span>玄幻</span>
                        </div>
                    </a>
                </div>
                <div class="tj-items">
                    <a href="javascript:;">
                        <div class="tj-item">
                            <div class="item-img2"></div>
                            <p>修罗武神</p>
                            <span>玄幻</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <!-- 热门速递 -->
        <div class="dt remen w">
            <!-- title -->
            <div class="remen-title">
                <h2>热门速递</h2>
                <div class="tap active2">二次元养老院</div>
                <div class="tap">9.0分以上佳作</div>
                <div class="zhan"></div>
                <div class="change">
                    <div class="change-icon"></div>
                    <div class="change-text">换一批</div>
                </div>
            </div>
            <!-- 每行内容 -->
            <div class="row">
                <div class="rm-items">
                    <a href="javascript:;">
                        <div class="rm-item">
                            <div class="item-img"></div>
                            <p>妖精的尾巴</p>
                            <span>热血</span>
                        </div>
                    </a>
                </div>
                <div class="rm-items">
                    <a href="javascript:;">
                        <div class="rm-item">
                            <div class="item-img"></div>
                            <p>妖精的尾巴</p>
                            <span>热血</span>
                        </div>
                    </a>
                </div>
                <div class="rm-items">
                    <a href="javascript:;">
                        <div class="rm-item">
                            <div class="item-img"></div>
                            <p>妖精的尾巴</p>
                            <span>热血</span>
                        </div>
                    </a>
                </div>
                <div class="rm-items">
                    <a href="javascript:;">
                        <div class="rm-item">
                            <div class="item-img"></div>
                            <p>妖精的尾巴</p>
                            <span>热血</span>
                        </div>
                    </a>
                </div>
            </div>
            <div class="row">
                <div class="rm-items">
                    <a href="javascript:;">
                        <div class="rm-item">
                            <div class="item-img"></div>
                            <p>妖精的尾巴</p>
                            <span>热血</span>
                        </div>
                    </a>
                </div>
                <div class="rm-items">
                    <a href="javascript:;">
                        <div class="rm-item">
                            <div class="item-img"></div>
                            <p>妖精的尾巴</p>
                            <span>热血</span>
                        </div>
                    </a>
                </div>
                <div class="rm-items">
                    <a href="javascript:;">
                        <div class="rm-item">
                            <div class="item-img"></div>
                            <p>妖精的尾巴</p>
                            <span>热血</span>
                        </div>
                    </a>
                </div>
                <div class="rm-items">
                    <a href="javascript:;">
                        <div class="rm-item">
                            <div class="item-img"></div>
                            <p>妖精的尾巴</p>
                            <span>热血</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <!-- 都市生活 -->
        <div class="dt container w">
            <!-- title -->
            <div class="title">
                <h2>都市生活</h2>
                <div class="change">
                    <div class="change-text">更多</div>
                    <div class="change-icon"></div>
                </div>
            </div>
            <!-- 内容 -->
            <div class="row">
                <div class="items">
                    <a href="javascript:;">
                        <div class="item">
                            <div class="item-img2"></div>
                            <p>修罗武神</p>
                            <span>玄幻</span>
                        </div>
                    </a>
                </div>
                <div class="items">
                    <a href="javascript:;">
                        <div class="item">
                            <div class="item-img2"></div>
                            <p>修罗武神</p>
                            <span>玄幻</span>
                        </div>
                    </a>
                </div>
                <div class="items">
                    <a href="javascript:;">
                        <div class="item">
                            <div class="item-img2"></div>
                            <p>修罗武神</p>
                            <span>玄幻</span>
                        </div>
                    </a>
                </div>
                <div class="items">
                    <a href="javascript:;">
                        <div class="item">
                            <div class="item-img2"></div>
                            <p>修罗武神</p>
                            <span>玄幻</span>
                        </div>
                    </a>
                </div>
                <div class="items">
                    <a href="javascript:;">
                        <div class="item">
                            <div class="item-img2"></div>
                            <p>修罗武神</p>
                            <span>玄幻</span>
                        </div>
                    </a>
                </div>
                <div class="items">
                    <a href="javascript:;">
                        <div class="item">
                            <div class="item-img2"></div>
                            <p>修罗武神</p>
                            <span>玄幻</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <!-- 奇幻异界 -->
        <div class="dt container w">
            <!-- title -->
            <div class="title">
                <h2>奇幻异界</h2>
                <div class="change">
                    <div class="change-text">更多</div>
                    <div class="change-icon"></div>
                </div>
            </div>
            <!-- 内容 -->
            <div class="row">
                <div class="items">
                    <a href="javascript:;">
                        <div class="item">
                            <div class="item-img2"></div>
                            <p>修罗武神</p>
                            <span>玄幻</span>
                        </div>
                    </a>
                </div>
                <div class="items">
                    <a href="javascript:;">
                        <div class="item">
                            <div class="item-img2"></div>
                            <p>修罗武神</p>
                            <span>玄幻</span>
                        </div>
                    </a>
                </div>
                <div class="items">
                    <a href="javascript:;">
                        <div class="item">
                            <div class="item-img2"></div>
                            <p>修罗武神</p>
                            <span>玄幻</span>
                        </div>
                    </a>
                </div>
                <div class="items">
                    <a href="javascript:;">
                        <div class="item">
                            <div class="item-img2"></div>
                            <p>修罗武神</p>
                            <span>玄幻</span>
                        </div>
                    </a>
                </div>
                <div class="items">
                    <a href="javascript:;">
                        <div class="item">
                            <div class="item-img2"></div>
                            <p>修罗武神</p>
                            <span>玄幻</span>
                        </div>
                    </a>
                </div>
                <div class="items">
                    <a href="javascript:;">
                        <div class="item">
                            <div class="item-img2"></div>
                            <p>修罗武神</p>
                            <span>玄幻</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <!-- 古风恋爱 -->
        <div class="dt container w">
            <!-- title -->
            <div class="title">
                <h2>古风恋爱</h2>
                <div class="change">
                    <div class="change-text">更多</div>
                    <div class="change-icon"></div>
                </div>
            </div>
            <!-- 内容 -->
            <div class="row">
                <div class="items">
                    <a href="javascript:;">
                        <div class="item">
                            <div class="item-img2"></div>
                            <p>修罗武神</p>
                            <span>玄幻</span>
                        </div>
                    </a>
                </div>
                <div class="items">
                    <a href="javascript:;">
                        <div class="item">
                            <div class="item-img2"></div>
                            <p>修罗武神</p>
                            <span>玄幻</span>
                        </div>
                    </a>
                </div>
                <div class="items">
                    <a href="javascript:;">
                        <div class="item">
                            <div class="item-img2"></div>
                            <p>修罗武神</p>
                            <span>玄幻</span>
                        </div>
                    </a>
                </div>
                <div class="items">
                    <a href="javascript:;">
                        <div class="item">
                            <div class="item-img2"></div>
                            <p>修罗武神</p>
                            <span>玄幻</span>
                        </div>
                    </a>
                </div>
                <div class="items">
                    <a href="javascript:;">
                        <div class="item">
                            <div class="item-img2"></div>
                            <p>修罗武神</p>
                            <span>玄幻</span>
                        </div>
                    </a>
                </div>
                <div class="items">
                    <a href="javascript:;">
                        <div class="item">
                            <div class="item-img2"></div>
                            <p>修罗武神</p>
                            <span>玄幻</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <!-- 电梯导航 -->
        <div class="content-container">
    <div class="animation">
      <div class="indicator">新人礼包</div>
    </div>
    <div class="tab">
      <ul>
        <li>为你推荐</li>
        <li>热门速递</li>
        <li>都市生活</li>
        <li>奇幻异界</li>
        <li>古风恋爱</li>
      </ul>
    </div>
    <div class="ding">

    </div>

        </div>
        <!-- 页尾 -->
        <footer>
    <div class="w">
      <div class="auto">
        <div class="left">
          <div class="my-logo">
            <img src="./images/logo.png" alt="">
          </div>
          <span>哔哩哔哩漫画</span>
          <div class="about">
            <a href="">关于我们</a>
            <a href="">关于我们</a>
            <a href="">关于我们</a>
            <a href="">关于我们</a>
          </div>
        </div>
        <div class="divider"></div>
        <div class="right">
          <div class="one">
            <a href="javascript:;">
              <img src="./images/bilibili.svg" alt="">
              <div class="panel">关注即送券</div>
            </a>
            <span>B 站官号</span>

          </div>
          <div class="one sina">
            <a href="javascript:;">
              <img src="./images/sina.png" alt="">
            </a>
            <span>新浪微博</span>
            <div class="border-box">
              <img src="./images/qrcode.png" alt="">
            </div>
          </div>
          <div class="one sina">
            <a href="javascript:;">
              <img src="./images/download.png" class="img" alt="">
            </a>
            <span>下载 bilibili 漫画客户端</span>
            <div class="border-box dow">
              <img src="./images/qrcode.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="row-two">
        <div class="logo-list">
          <img src="./images/friend1.png" alt="" class="img">
          <img src="./images/friend2.png" alt="">
        </div>
        <div class="tt">
          <p>互联网 ICP 备案：沪 ICP17039440 号 - 1 | 网络文化经营许可证：沪网文 [2020]5452-371 号</p>
          <p>全国网安备案号：31011002003092 | 增值电信业务经营许可证 沪 B2-20190879</p>
          <p><a href="http://jb.ccm.gov.cn" target="_blank">12318
              全国文化市场举报网站</a><span style="margin: 0px 5px;">|</span><a href="http://www.shjbzx.cn"
              target="_blank">上海市互联网违法和不良信息举报中心</a></p>
          <p>上海呵呵呵文化传播有限公司 | 地址：上海市杨浦区政立路485号 | 电话：021-25099888</p>
        </div>
      </div>
    </div>
    </div>
        </footer>
        <!-- js文件 -->
        <script src="./js/jquery.js"></script>
        <script src="./swiper/sw.js"></script>
        <script src="./js/index.js"></script>
        <script>
            var swiper = new Swiper('.swiper-container', {
                autoplay: 2000,
                loop: true,
                loopedSlides: 3,
                spaceBetween: 0,
                centeredSlides: true,
                slidesPerView: 'auto',
                pagination: '.swiper-pagination',
                nextButton: '.swiper-button-next',
                prevButton: '.swiper-button-prev',
                autoplayDisableOnInteraction: false,
                paginationClickable: true,
            })
        </script>
    </body>
</html>
